﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>测试在图表动态添加和删除元素</title>
    <script src="../XEngine/LineUtil.js"></script>
    <script src="../XEngine/XEngine.js"></script>
    <script src="../XEngine/XSVG.js"></script>
    <script src="../XEngine/XNode.js"></script>
    <script src="../XWorkflow/XWFActivity.js"></script>

    <script type="text/javascript">
        var id = 0;
        window.onload = function () {
            // 初始化流程引擎
            XEngine.init(document.getElementById('container'));

            // 创建一个图表用于显示流程图
            var d1 = XEngine.createDiagram('d1');

            // 创建一个节点
            var rect1 = new XWFProcess('act' + id++);
            rect1.setPos(200, 200);
            rect1.setSize(50, 50);
            d1.add(rect1);

            // 显示图表
            XEngine.showDiagram(d1);

            refreshDebug();
        }

        function randAdd() {
            var x = Math.random() * 200;
            var y = Math.random() * 200;
            var newAct = new XWFProcess('act' + id++);
            newAct.setPos(x, y);
            newAct.setSize(50, 50);
            XEngine.getCurrentDiagram().add(newAct);
            refreshDebug();
        }

        function randDel() {
            var index = Math.random() * (XEngine.getCurrentDiagram().getLength() - 1);
            XEngine.getCurrentDiagram().remove(XEngine.getCurrentDiagram().getAt(parseInt(index)));
            refreshDebug();
        }

        function randDelByIndex() {
            var index = Math.random() * (XEngine.getCurrentDiagram().getLength() - 1);
            XEngine.getCurrentDiagram().removeAt(parseInt(index));
            refreshDebug();
        }

        function refreshDebug() {
            document.getElementById('debug').innerHTML = 'diagram:' + XEngine.getCurrentDiagram().getName() + ",elements:"
                + XEngine.getCurrentDiagram().getLength();
        }
    </script>
</head>
<body>
    <button onclick="randAdd();">Add</button>
    <button onclick="randDel();">Delete by object</button>
    <button onclick="randDelByIndex();">Delete by index</button>
    <div id="debug"></div>
    <div id="container" style="width:100%; height:600px;">

    </div>
</body>
</html>
